<template>
  <div class="internal-communication-container">
    <div style="display: flex; justify-content: space-between; padding: 0px">
      <el-button type="primary" icon="el-icon-back" @click="goBack"
        >返回</el-button
      >
      <span>
        <el-button
          type="success"
          icon="el-icon-check"
          @click="saveData"
          v-if="!isView"
          >保存</el-button
        >
        <el-button type="" icon="el-icon-menu" @click="goToList"
          >列表</el-button
        >
        <el-button type="info" icon="el-icon-printer" @click="printToPDF"
          >打印PDF</el-button
        >
      </span>
    </div>
    <div class="internal-communication">
      <h2 style="">内部联络单</h2>
      <p>编号：<input v-model="formData.docNumber" :disabled="isView" /></p>
      <hr style="margin: 15px 0px" />
      <div style="display: flex; justify-content: space-between">
        <div
          style="display: flex; flex-direction: column; align-items: flex-start"
        >
          <label
            >收件人单位：<input
              style="border-bottom: 1px solid"
              v-model="formData.recipientUnit"
              :disabled="isView"
          /></label>
          <label>
            收 &ensp;件&ensp; 人：<input
              style="border-bottom: 1px solid"
              v-model="formData.recipient"
              :disabled="isView"
          /></label>
          <label
            >发 文时 间：<input
              style="border-bottom: 1px solid"
              v-model="formData.issueTime"
              :disabled="isView"
          /></label>
        </div>
        <div style="text-align: right">
          <label>抄送：</label>
          <label
            ><input
              style="height: 13px"
              type="checkbox"
              v-model="formData.ccPresidentOffice"
              :disabled="isView"
            />
            总 裁 办</label
          >&emsp;&emsp;
          <label
            ><input
              style="height: 13px"
              type="checkbox"
              v-model="formData.ccEnterpriseManagement"
              :disabled="isView"
            />
            企业管理部</label
          ><br />
          <label
            ><input
              style="height: 13px"
              type="checkbox"
              v-model="formData.ccFinancialManagement"
              :disabled="isView"
            />
            财务管理部</label
          >&emsp;
          <!-- <label><input type="checkbox" v-model="formData.ccYudafuElectronics" :disabled="isView">
                        裕达富电子</label><br> -->
          <!-- <label><input type="checkbox" v-model="formData.ccLongkeElectronics" :disabled="isView">
                        隆科电子</label>&ensp;
                    &ensp;&ensp; -->
          <label
            ><input
              style="height: 13px"
              type="checkbox"
              v-model="formData.ccOther"
              :disabled="isView" />&emsp;<input
              type="text"
              v-model="formData.ccOthersContent"
              style="width: 22%; border-bottom: 1px solid"
              :disabled="isView"
          /></label>
        </div>
      </div>
      <table border="1" style="width: 100%; text-align: center">
        <tr>
          <td rowspan="2">主 题</td>
          <td rowspan="2" colspan="3">
            <input v-model="formData.subject" :disabled="isView" />
          </td>
          <td rowspan="2">要求回复</td>
          <td>
            <label
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
              ><input
                type="radio"
                v-model="formData.requireReply"
                value="是"
                :disabled="isView"
              />
              是</label
            >
          </td>
          <td>回复部门</td>
          <td>
            <input v-model="formData.replyDepartment" :disabled="isView" />
          </td>
        </tr>
        <tr>
          <td>
            <label
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
              ><input
                type="radio"
                v-model="formData.requireReply"
                value="否"
                :disabled="isView"
              />
              否</label
            >
          </td>
          <td>回复时间</td>
          <td><input v-model="formData.replyTime" :disabled="isView" /></td>
        </tr>
        <tr>
          <td>发出部门</td>
          <td>
            <input v-model="formData.issuingDepartment" :disabled="isView" />
          </td>
          <td>经办</td>
          <td><input v-model="formData.docHandler" :disabled="isView" /></td>
          <td>审核</td>
          <td><input v-model="formData.docReviewer" :disabled="isView" /></td>
          <td>批准</td>
          <td><input v-model="formData.docApprover" :disabled="isView" /></td>
        </tr>

        <tr>
          <td colspan="8">
            <div style="text-align: left">
              <label>具体说明：</label>
              <textarea
                v-model="formData.detailDescription"
                style=""
                :disabled="isView"
              ></textarea>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="8">
            <div style="text-align: left">
              <label>回复意见：</label>
              <textarea
                v-model="formData.replyOpinion"
                style=""
                :disabled="isView"
              ></textarea>
            </div>
            <div style="text-align: right">
              <label>审核：</label
              ><input
                v-model="formData.reviewAfterReply"
                :disabled="isView"
              />&emsp; <label>经办：</label
              ><input v-model="formData.handleAfterReply" :disabled="isView" />
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="8">
            <div style="text-align: left">
              <label
                >收文签收：<textarea
                  style=""
                  v-model="formData.receiptSign"
                  :disabled="isView"
                ></textarea>
              </label>
            </div>
          </td>
        </tr>
      </table>

      <p
        style="
          display: flex;
          justify-content: space-between;
          color: #757575;
          margin-top: 15px;
        "
      >
        <span>表单编号及版本：FR-JY-081 A/2 </span><span>保存期限：长期</span>
      </p>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import {
  getInternalCommunicationDetail,
  saveInternalCommunication,
} from "@/api/internalCommunication";

export default {
  data() {
    return {
      isView: false,
      isEdit: false,
      formData: {
        id: null,
        docNumber: "",
        recipientUnit: "",
        recipient: "",
        issueTime: "",
        ccPresidentOffice: false,
        ccEnterpriseManagement: false,
        ccFinancialManagement: false,
        ccYudafuElectronics: false,
        ccLongkeElectronics: false,
        ccOther: false,
        ccOthersContent: "",
        subject: "",
        requireReply: "",
        replyDepartment: "",
        replyTime: "",
        issuingDepartment: "",
        docHandler: "",
        docReviewer: "",
        docApprover: "",
        detailDescription: "",
        replyOpinion: "",
        reviewAfterReply: "",
        handleAfterReply: "",
        receiptSign: "",
      },
    };
  },
  created() {
    // 获取路由参数
    const { id, type } = this.$route.query;
    if (id) {
      if (type === "view") {
        this.isView = true;
      } else if (type === "edit") {
        this.isEdit = true;
      }
      this.getDetail(id);
    }
  },
  methods: {
    goBack() {
      this.$router.push("/main/renshi/renshizhidu");
    },
    async getDetail(id) {
      try {
        const response = await getInternalCommunicationDetail(id);
        if (response.data && response.data.code === 200) {
          const data = response.data.data;
          if (data) {
            this.formData = data;
          }
        } else {
          this.$message.error(response.data?.message || "获取详情失败");
        }
      } catch (error) {
        console.error("获取详情失败：", error);
        this.$message.error("获取详情失败：" + error.message);
      }
    },
    validateForm() {
      if (!this.formData.docNumber) {
        this.$message.error("编号不能为空");
        return false;
      }
      if (!this.formData.recipientUnit) {
        this.$message.error("收件人单位不能为空");
        return false;
      }
      if (!this.formData.recipient) {
        this.$message.error("收件人不能为空");
        return false;
      }
      if (!this.formData.issueTime) {
        this.$message.error("发文时间不能为空");
        return false;
      }
      if (!this.formData.subject) {
        this.$message.error("主题不能为空");
        return false;
      }
      if (!this.formData.issuingDepartment) {
        this.$message.error("发出部门不能为空");
        return false;
      }
      return true;
    },
    async saveData() {
      if (!this.validateForm()) {
        return;
      }

      try {
        const response = await saveInternalCommunication(this.formData);
        if (response.data && response.data.code === 200) {
          this.$message.success("保存成功");
          this.goToList();
        } else {
          this.$message.error(response.data?.message || "保存失败");
        }
      } catch (error) {
        console.error("保存失败：", error);
        this.$message.error("保存失败：" + error.message);
      }
    },
    goToList() {
      this.$router.push("/main/renshi/renshizhidu/nblianluoh/nblianluohList");
    },
    async printToPDF() {
      // const doc = new jsPDF('P', 'pt', 'a4');
      const doc = new jsPDF("L", "pt", "a4");
      const element = document.querySelector(".internal-communication");
      await html2canvas(element).then((canvas) => {
        const imgData = canvas.toDataURL("image/png");
        // const imgWidth = 522;
        // const pageHeight = 841.89;
        const imgWidth = 291 * 2.65; // 横向 A4 页面宽度
        const pageHeight = 210 * 2.65; // 横向 A4 页面高度
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        let positionY = 0;
        if (imgHeight >= pageHeight) {
          let leftHeight = imgHeight;
          while (leftHeight >= pageHeight) {
            doc.addImage(imgData, "PNG", 40, positionY, imgWidth, pageHeight);
            positionY += pageHeight;
            doc.addPage();
            leftHeight -= pageHeight;
          }
          doc.addImage(imgData, "PNG", 40, positionY, imgWidth, leftHeight);
        } else {
          doc.addImage(imgData, "PNG", 40, positionY, imgWidth, imgHeight);
        }
      });
      doc.save("内部联络单.pdf");
    },
  },
};
</script>

<style scoped>
.internal-communication-container {
  font-family: "宋体", sans-serif;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
}

.internal-communication {
  /* border: 1px solid #000; */
  padding: 10px;
  margin-top: 10px;
  line-height: 30px;
  font-size: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
}

th,
td {
  border: 1px solid #000;
  padding: 3px;
  white-space: nowrap;
}

input {
  border: 0px;
  /* font-size: 22px; */
}

input:disabled {
  background-color: transparent;
  color: #606266;
  cursor: not-allowed;
}

textarea {
  outline: none;
  border: 0px;
  font-family: "宋体";
  /* font-size: 22px; */
  padding: 20px;
  width: 80%;
}

textarea:disabled {
  color: #606266;
  cursor: not-allowed;
}

/* button {
    margin-top: 10px;
    padding: 5px 10px;
    cursor: pointer;
} */
</style>